<template>
  <div>
    <!--预约挂号-->
    <div>
      <div class="shouye">
        <div class="blue"></div>
        <h1>订单详情</h1>
      </div>
      <br/>
    </div>

    <div class="hzxx">
      <p>患者信息</p>
      <el-card class="box-card">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="患者姓名">
              <el-input
                v-model="recordVoWL.thePatient.name"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input
                v-model="recordVoWL.thePatient.documentType"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>

            <el-form-item label="就诊人地址">
              <el-input
                v-model="recordVoWL.thePatient.address"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="就诊卡号">
              <el-input
                v-model="recordVoWL.thePatient.hospitalNumber"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input
                v-model="recordVoWL.thePatient.number"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model="recordVoWL.thePatient.phone"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
<!--            <el-form-item label="患者头像">-->
<!--              <el-input-->
<!--                v-model="thepatient.name"-->
<!--                style="width:250px"-->
<!--                disabled-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="关系">
              <el-input
                v-model="recordVoWL.thePatient.relation"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

<!--    <div class="yyxx" style="height: 600px">-->
<!--      <p>就诊信息</p>-->
<!--      <el-card class="box-card" style="height: 600px">-->
<!--        <div class="hzxx_box1">-->
<!--          <el-form-->
<!--            :label-position="labelPosition"-->
<!--            label-width="96px"-->
<!--            :model="formLabelAlign"-->
<!--          >-->
<!--            <el-form-item label="就诊医院">-->
<!--              <el-input-->
<!--                v-model="recordVoWL.campus.campusName"-->
<!--                style="width:250px;"-->
<!--                disabled-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="就诊医生">-->
<!--              <el-input-->
<!--                v-model="recordVoWL.doctor.doctorName"-->
<!--                style="width:250px;"-->
<!--                disabled-->
<!--              >-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="费用类型">-->
<!--              <el-input-->
<!--                v-model="recordVoWL.rechargeExplain"-->
<!--                style="width:250px;"-->
<!--                disabled-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--&lt;!&ndash;            <el-form-item label="费用">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                v-model="recordVoWL.money"&ndash;&gt;-->
<!--&lt;!&ndash;                style="width:250px;"&ndash;&gt;-->
<!--&lt;!&ndash;                disabled&ndash;&gt;-->
<!--&lt;!&ndash;              ></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-form-item>&ndash;&gt;-->

<!--          </el-form>-->
<!--        </div>-->

<!--        <div class="hzxx_box2">-->
<!--          <el-form-->
<!--            :label-position="labelPosition"-->
<!--            label-width="96px"-->
<!--            :model="formLabelAlign"-->
<!--          >-->
<!--            <el-form-item label="医院地址">-->
<!--              <el-input-->
<!--                v-model="recordVoWL.campus.campusAddress"-->
<!--                style="width:250px"-->
<!--                disabled-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="医生职称">-->
<!--              <el-input v-model="recordVoWL.doctor.jobTitle" style="width:250px;" disabled>-->
<!--              </el-input>-->
<!--            </el-form-item>-->


<!--          </el-form>-->
<!--        </div>-->

<!--        <div class="hzxx_box2">-->
<!--          <el-form-->
<!--            :label-position="labelPosition"-->
<!--            label-width="96px"-->
<!--            :model="formLabelAlign"-->
<!--          >-->
<!--            <el-form-item label="就诊科室">-->
<!--              <el-input-->
<!--                v-model="recordVoWL.divisionType.divisionName"-->
<!--                style="width:250px"-->
<!--                disabled-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--&lt;!&ndash;            <el-form-item label="业务类型">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                v-model="nucleicacid.cost"&ndash;&gt;-->
<!--&lt;!&ndash;                style="width:250px;"&ndash;&gt;-->
<!--&lt;!&ndash;                disabled&ndash;&gt;-->
<!--&lt;!&ndash;              >&ndash;&gt;-->
<!--&lt;!&ndash;              </el-input>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-form-item>&ndash;&gt;-->
<!--          </el-form>-->
<!--        </div>-->

<!--      </el-card>-->




<!--    </div>-->

    <div class="yyxx">
      <p>订单信息</p>
      <el-card class="box-card" style="height:360px;">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="订单总额">
              <el-input
                v-model="recordVoWL.money+'￥'"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-input
                v-model="jsj.state"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="订单备注">
              <el-input
                v-model="waitingrecord.createTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>

          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="支付方式">
              <el-input
                v-model="jsj.zhifufangshi"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input v-model="recordVoWL.drugRecordSerialNumber" style="width:250px;" disabled>
              </el-input>
            </el-form-item>


          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="卡内余额">
              <el-input
                v-model="recordVoWL.patientCard.balance"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="支付时间">
              <el-input
                v-model="recordVoWL.creationTime"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="anniu">
          <el-button type="primary" plain @click="quxiao">确定</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      id: "",
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      nucleicacid: [],
      thepatient: [],
      doctor: [],
      waitingrecord: [],
      divisiontype: [],
      campus: [],
      recordVoWL:{},
      jsj:{
        state:"已支付",
        zhifufangshi:"微信支付",
      },

    };
  },
  created() {
    //接收id
    this.id = localStorage.getItem("id");
    //  alert( this.id)
    //页面渲染之前执行，一般调用methods定义的方法
    this.getByIdnucleicacid();
  },
  methods: {
    getByIdnucleicacid() {
      this.$axios
        .get("/record/record/record/getByRID/" + this.id)
        .then(res => {
          if (res.data.code == 20000) {
            this.recordVoWL = res.data.data.recordVoWL;
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    quxiao() {
      // this.$router.push("/hesuan");
      window.history.back(-1);
    }
  }
};
</script>

<style>
.shouye {
  margin-top: 10px;
}

.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}

.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  height: 260px;
}

.hzxx {
  background-color: #e6e6e6;
}

.hzxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}

.hzxx_box1 {
  width: 300px;
  float: left;
}

.hzxx_box2 {
  float: left;
  margin-left: 100px;
}

.yyxx {
  background-color: #e6e6e6;
}

.yyxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}

.anniu {
  width: 400px;
  height: 50px;
  margin-left: 100px;
  margin-top: 240px;
}
</style>
